<template>
  <ul class="t-sort container fx">
    <li
      class="item fx-c bg-w"
      :class="{ active: i == activeIndex }"
      v-for="(item, i) in tSortData"
      :key="item"
      @click="changeActiveIndex(i)"
    >
      <span class="cs">{{ item }}</span>
    </li>
  </ul>
</template>

<script>
import { setSessionStorage, getSessionStorage } from "@/utils/utils";
export default {
  name: "TechnologySort",
  data() {
    return {
      tSortData: [
        "全部",
        "程序员",
        "Java",
        "Python",
        "算法",
        "前端",
        "年终总结",
        "后端",
        "代码规范",
        "Linux",
        "编程语言",
        "数据结构",
        "架构",
        "面试",
        "Github",
        "开源",
      ],
      activeIndex: getSessionStorage('technologySortActiveIndex') || 0,
    };
  },
  methods: {
    changeActiveIndex(i) {
      setSessionStorage("technologySortActiveIndex", i);
      this.activeIndex = i;
    },
  },
};
</script>

<style lang="scss" scoped>
$cm-color: #007fff;
.t-sort {
  flex-wrap: wrap;
  margin-bottom: 1rem;
  .item {
    padding: 0.5rem 0.9rem;
    margin-right: 2rem;
    margin-top: 1rem;
    border-radius: 1rem;
    span {
      font-size: 1.3rem;
      &:hover {
        color: $cm-color;
      }
    }
    &.active {
      background: $cm-color;
      color: #fff;
      span {
        &:hover {
          color: #fff;
        }
      }
    }
  }
}
</style>